<template>
	<view>
		<u-navbar autoBack bgColor="transparent" leftIconColor="#fff"></u-navbar>
		<view class="content">
			<view class="content_header"></view>
			<view class="content_body">
				<view style="display: flex;justify-content: center;margin: 30px auto;">
					<u-avatar :src="fileUrl + avatar" :size="100" @click="sheet = true"></u-avatar>
				</view>
				<view class="form">
					<u-form :model="form" :rules="rules" ref="form" label-position="top" label-width="80px">
						<u-form-item prop="nickname" label="昵称">
							<u-input v-model="form.nickname" placeholder="昵称" maxlength="20" clearable></u-input>
						</u-form-item>
						<u-form-item prop="email" label="邮箱">
							<u-input v-model="form.email" placeholder="邮箱" maxlength="30"></u-input>
						</u-form-item>
						<u-form-item label="手机号码">
							<u-input v-model="form.phone" disabled>
								<u-text slot="suffix" color="#00a679" :size="12" text="去修改" @click="goPhone()"></u-text>
							</u-input>
						</u-form-item>
					</u-form>
					<view>
						<view class="saveBtn" @click="handleSave()">保存</view>
					</view>
				</view>
			</view>
		</view>

		<u-action-sheet :show="sheet" :actions="list" title="修改头像" :round="15" cancelText="取消" @select="selected"
			:closeOnClickAction="true" @close="sheet = false"></u-action-sheet>

		<c-loading></c-loading>
	</view>
</template>

<script>
import { mapGetters } from 'vuex'
import {
	uploadFile
} from '@/api/file'
import {
	updateInfo 
} from '@/api/user'
export default {
	data() {
		return {
			sheet: false,
			list: [{
				name: '拍照',
				type: '1'
			}, {
				name: '相册图片',
				type: '2'
			}, {
				name: '查看头像',
				type: '3'
			}, {
				name: '系统头像',
				type: '4'
			}],
			form: {
				nickname: '',
				email: '',
				phone: ''
			},
			rules: {
				nickname: [
					{ required: true, message: '昵称不能为空', trigger: ['blur', 'change'] }
				],
				email: [
					{ type: 'email', message: '邮箱格式错误', trigger: ['blur', 'change'] }
				]
			}
		}
	},
	computed: {
		...mapGetters(['avatar', 'id', 'name', 'nickname', 'grade', 'major', 'dept', 'email', 'phone']),
	},
	created() {
		this.form.phone = this.phone
		this.form.nickname = this.nickname
		this.form.email = this.email
	},
	methods: {
		selected(item) {
			const currAvatar = this.fileUrl  + this.avatar
			this.sheet = false
			let type = ''
			if (item.type == '1') {
				type = ['camera']
			} else if (item.type == '2') {
				type = ['album']
			} 
			if (item.type == '3') {
				uni.previewImage({
					urls: [currAvatar]
				})
			} else if (item.type == '4') {
				uni.navigateTo({
					url: "/pages/tab4/userInfo/avatar/avatar"
				})
			} else {
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					sourceType: type,
					crop: {
						quality: 100,
						width: 500,
						height: 500
					},
					success: (res) => {
						const params = {}
						params.file = res.tempFiles[0]
						params.uid = this.id
						params.type = 'avatar'
						uploadFile({ data: params }).then(res => {
							if(res.code === 200) {
								this.$store.commit('SET_AVATAR', res.data.downUrl)
							}
						})
					},
					fail: (error) => {
						this.$toast.show({
							msg: '用户取消'
						})
					}
				})
			}
		},
		goPhone() {
			uni.navigateTo({
				url: '/pages/tab4/set/safe/phone'
			})
		},
		handleSave() {
			this.$refs.form.validate().then(() => {
				this.form.avatar = this.avatar
				this.form.id = this.id
				updateInfo(this.form).then(res => {
					if(res.code === 200) {
						this.$store.commit('SET_NICKNAME', this.form.nickname)
						this.$store.commit('SET_EMAIL', this.form.email)
					}
					this.$toast.show({
						msg: res.msg
					})
				})
			})
			
		}
	}
}
</script>

<style lang="scss" scoped>
.content {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #ffffff;
	
	&_header {
		position: relative;
		width: 100%;
		height: 120px;
		background: linear-gradient(110deg, #FF8C6B, #00a679);
		border-radius: 0 0 0 48px;

		&::before {
			content: "";
			position: absolute;
			bottom: -48px;
			right: 0;
			width: 48px;
			height: 48px;
			background: #ffffff;
			border-radius: 0 48px 0 0;
			z-index: 99;
		}

		&::after {
			content: "";
			position: absolute;
			bottom: -48px;
			right: 0;
			width: 48px;
			height: 48px;
			background: #00a679;
		}
	}

	&_body {
		height: 100%;
		z-index: 666;

		.form {
			padding: 20px;
			box-sizing: border-box;
		}

		&::v-deep .u-input {
			background-color: #eeeeee;
			border-radius: 20px;
		}

		&::v-deep .u-input__content {
			padding: 0 5px;
		}
	}

	.saveBtn {
		padding: 10px 0;
		background-color: $primary-theme-color;
		border-radius: 20px;
		margin-top: 30px;
		color: #ffffff;
		text-align: center;
		font-weight: bold;
		font-size: 16px;
		letter-spacing: 2px;
	}
}
</style>
